<!-- 一次图管路 -->
<template>
  <div class="">
    <el-card>
      <el-row style="margin-bottom: 5px">
        <el-col :span="24">
          <el-button type="primary" @click="addMap" size="mini" v-has="'add'"
            >添加一次图</el-button
          >
        </el-col>
      </el-row>
      <yg-table
        :columns="columns"
        :tableList="TableList"
        :loading="loadingShow"
        :height="'750'"
      >
        <el-table-column slot="action" fixed="right" label="操作" width="200">
          <template slot-scope="scope">
            <el-tooltip content="删除" placement="top" effect="light">
              <el-button
                type="danger"
                icon="el-icon-delete"
                circle
                @click="delectMap(scope.row)"
                size="mini"
                v-has="'del'"
              >
              </el-button>
            </el-tooltip>
            <el-tooltip content="组态编辑" placement="top" effect="light">
              <el-button
                type="warning"
                icon="el-icon-s-tools"
                circle
                @click="queryMap(scope.row.id)"
                size="mini"
                v-has="'editview'"
              >
              </el-button>
            </el-tooltip>
            <el-tooltip content="复制一次图" placement="top" effect="light">
              <el-button
                type="primary"
                icon="el-icon-copy-document"
                circle
                @click="copyMap(scope.row)"
                size="mini"
              ></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </yg-table>
    </el-card>
    <!-- 添加一次图弹窗 -->
    <el-dialog
      title="添加一次图"
      :visible.sync="addMapDialogVisible"
      width="50%"
      @close="addMapDialogClose"
      :close-on-click-modal="false"
    >
      <yg-from
        ref="addMapForm"
        :formObj="addMapFromObj"
        :formData="addMapFromData"
      ></yg-from>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="addMapDialogVisible = false"
          >取 消</el-button
        >
        <el-button size="mini" type="primary" @click="addMapConfirm"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 修改一次图信息 -->
    <el-dialog
      title="复制一次图"
      :visible.sync="copyMapDialogVisible"
      width="50%"
      :close-on-click-modal="false"
      @close="copyMapDialogClose"
    >
      <yg-from
        ref="copyMapForm"
        :formObj="copyMapFromObj"
        :formData="copyMapFromData"
      ></yg-from>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="copyMapDialogVisible = false"
          >取 消</el-button
        >
        <el-button size="mini" type="primary" @click="copyMapConfirm"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { myStorage } from "@/utils/localStorage";
import YgTable from "@/components/Table/YgTable.vue";
import YgFrom from "@/components/Form/YgFrom.vue";
import {
  setMessageCallback,
  publishMsg,
  removeMessageCallback,
  checkSpecialId,
} from "@/mqtt";
export default {
  //import引入的组件需要注入到对象中才能使用
  name: "ParamGraphic",
  components: {
    YgTable,
    YgFrom,
  },
  data() {
    //这里存放数据
    return {
      loadingShow: false,
      addMapDialogVisible: false, //添加一次图弹窗显隐
      copyMapDialogVisible: false, //修改一次图信息
      columns: [
        {
          prop: "id",
          label: "一次图id",
          align: "left",
        },
        {
          prop: "name",
          label: "标题名称",
        },
        {
          prop: "update_time",
          label: "最后保存时间",
        },
        { slot: "action" },
      ],
      TableList: [],
      addMapFromObj: [
        {
          input: true, //是input
          label: "一次图id", //字段
          prop: "id", //字段名
          width: 12, //参考el-col
          placeholder: "请输入一次图id",
          disabled: false, //是否禁用
          labelWidth: "80px",
          rules: [
            {
              required: true,
              message: "请输入一次图ID",
            },
          ],
        },
        {
          input: true, //是input
          label: "名称", //字段
          prop: "name", //字段名
          width: 12, //参考el-col
          placeholder: "请输入一次图名称",
          disabled: false, //是否禁用
          labelWidth: "80px",
          rules: [
            {
              required: true,
              message: "请输入一次图名称",
            },
          ],
        },
      ],
      addMapFromData: {
        id: "",
        name: "",
      },
      copyMapFromObj: [
        {
          input: true, //是input
          label: "一次图id", //字段
          prop: "id", //字段名
          width: 12, //参考el-col
          placeholder: "请输入一次图id",
          disabled: false, //是否禁用
          labelWidth: "80px",
        },
        {
          input: true, //是input
          label: "名称", //字段
          prop: "name", //字段名
          width: 12, //参考el-col
          placeholder: "请输入一次图名称",
          disabled: false, //是否禁用
          labelWidth: "80px",
        },
        {
          input: true, //是input
          label: "名称", //字段
          prop: "from", //字段名
          width: 12, //参考el-col
          placeholder: "请输入复制一次图id",
          disabled: true, //是否禁用
          labelWidth: "80px",
        },
      ],
      copyMapFromData: {
        id: "",
        name: "",
        from: "",
      },
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    addMap() {
      this.addMapDialogVisible = true;
    },
    copyMap(val) {
      //console.log("修改一次图信息", val);
      this.copyMapDialogVisible = true;
      this.copyMapFromData.from = val.id;
    },
    delectMap(id) {
      // console.log("删除一次图", id);
      this.$confirm(
        `将要删除id为:${id.id} 名称为:${id.name} 的一次图吗？是否确定删除?`,
        "删除一次图",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          let newMsg = {
            webMsgType: 1016,
            funCode: 2,
          };
          newMsg.data = { id: id.id };
          publishMsg(newMsg);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    queryMap(val) {
      let routeUrl = this.$router.resolve({
        path: "/TopologyIndex",
        query: {
          val,
        },
      });
      window.open(routeUrl.href, "_blank");
    },
    copyMapConfirm() {
      if (this.$refs.copyMapForm.submitForm()) {
        let newMsg = {
          webMsgType: 1016,
          funCode: 1,
        };
        newMsg.data = this.copyMapFromData;
        publishMsg(newMsg);
        this.copyMapDialogVisible = false;
        // this.$message.success("更新一次图信息成功");
      }
    },
    copyMapDialogClose() {
      this.$refs.copyMapForm.resetForm();
    },
    async addMapConfirm() {
      if (this.$refs.addMapForm.submitForm()) {
        let newMsg = {
          webMsgType: 1016,
          funCode: 1,
        };
        //console.log(this.addMapFromData);
        newMsg.data = {
          id: this.addMapFromData.id,
          name: this.addMapFromData.name,
        };
        // //console.log(this.addTopicFromData)
        publishMsg(newMsg);
        this.addMapDialogVisible = false;
      }
    },
    addMapDialogClose() {
      this.$refs.addMapForm.resetForm();
    },
    onMessage(topic, msg) {
      // //console.log("正在监听--一次图页面数据");
      //console.log("一次图", topic, msg);
      switch (msg.webMsgType) {
        case 1016:
          switch (msg.funCode) {
            case 0:
              if (msg.retCode != 0 || !msg.data) {
                this.$message.error(msg.retMsg);
              } else {
                this.TableList = msg.data;
                this.loadingShow = false;
              }
              break;
            case 1:
              if (checkSpecialId(msg)) {
                if (msg.retCode != 0) {
                  this.$message.error(msg.retMsg);
                } else {
                  this.$message.success("添加一次图信息成功");
                }
              }
              break;
            case 2:
              if (checkSpecialId(msg)) {
                if (msg.retCode != 0) {
                  this.$message.error(msg.retMsg);
                } else {
                  this.$message.success("删除一次图成功!");
                }
              }
              break;
            case 5:
              if (msg.retCode != 0 || !msg.data) {
                this.$message.error(msg.retMsg);
              } else {
                for (let i = 0; i < this.TableList.length; i++) {
                  if (this.TableList[i].id == msg.data.id) {
                    this.TableList[i].id = msg.data.id;
                    this.TableList[i].update_time = msg.data.update_time;
                  }
                }
              }
              break;
            default:
              break;
          }
          break;
        default:
          break;
      }
    },
    // 按钮点击
    buttonClick(index, prop) {
      //console.log(index, prop);
      if (index == "resetButton") {
        this.$refs.publicForm.resetForm();
      }
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    setMessageCallback(this.onMessage);
    publishMsg({
      webMsgType: 1016,
      funCode: 0,
    });
    this.loadingShow = true;
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  destroyed() {
    removeMessageCallback(this.onMessage);
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-card__body {
  padding: 5px 5px 5px 5px;
}
</style>
